<template>
  <div
    class="menu-item"
    :class="{
      'menu-item--active': active,
    }"
  >
    <div class="menu-item__icon">
      <img :src="active ? menu.activeIcon : menu.icon" />
    </div>
    <div class="menu-item__label">
      {{ menu.label }}
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  menu: Object,
  active: Boolean,
})
const userStore = useUserStore()
const beforeStyle = ref({})
// const getrole = () => {
//   if (userStore.userdata.goods != undefined) {
//     if (userStore.userdata.roles.includes('cp_full')) {
//       let str = `${userStore.packageJs.plantcode}:cp_full`
//       if (userStore.userdata.goods != undefined) {
//         if (userStore.userdata.goods[str] != undefined) {
//           return userStore.userdata.goods[str].status == 1
//         } else {
//           return false
//         }
//       } else {
//         return true
//       }
//     } else {
//       let str = `${userStore.packageJs.plantcode}:${props.menu.product_code}`
//       if (userStore.userdata.goods != undefined) {
//         if (userStore.userdata.goods[str] != undefined) {
//           return userStore.userdata.goods[str].status == 1
//         } else {
//           return false
//         }
//       } else {
//         return true
//       }
//     }
//   }
// }

</script>
<style lang="scss" scoped>
.menu-item {
  margin-bottom: 16px;
  position: relative;
  cursor: pointer;
  display: flex;

  flex-direction: column;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }
}

.menu-item__icon {
  width: 20px;
  height: 20px;

  img {
    width: 100%;
  }
}

.menu-item__label {
  text-align: center;
  font-size: 12px;
  opacity: 0.5;
  color: #fff;
  margin-top: 5px;
}
.menu-item--active .menu-item__label{
  opacity: 1;
}

.menu-item--active {
  color: var(--primary);
  text-align: center;
}
</style>
